<template>
  <div class="question">
    <!-- 头部区域 -->
    <div class="top">
      <!-- 标题栏 -->
      <van-dropdown-menu
        ><van-dropdown-item v-model="pitchCity" ref="item">
          <template #title>
            <span class="title"
              >面试宝典<b class="city">{{ pitchCity }}</b></span
            >
          </template>
          <!-- 城市列表索引栏 -->
          <template #default>
            <van-index-bar
              v-for="(vlaue, key, index) in indexList"
              :key="index"
            >
              <van-index-anchor
                :index="key"
                style="background-color: #f7f4f5;"
              />
              <van-cell
                :title="items"
                v-for="(items, indexs) in vlaue"
                :key="indexs"
                @click="citys(items)"
              />
            </van-index-bar>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 频道栏目 -->
      <van-tabs
        v-model="active"
        line-width="0px"
        class="channel"
        title-active-color="red"
      >
        <van-tab
          v-for="(value, key, index) in citySubject"
          :key="index"
          title-style="height: 30px;"
          :title="value.name"
        >
          <!-- 内容区域 -->
          <div class="contents">
            <div class="left">
              <div class="top">
                <i class="iconfont iconicon_mine_cuoti subjectsIcon1"></i>
                <div class="subjects">常错题库</div>
              </div>
              <div class="bottom">
                <i
                  class="iconfont iconicon_mine_qiyeshoucang subjectsIcon2"
                ></i>
                <div class="subjects">企业题库</div>
              </div>
            </div>

            <van-circle
              v-model="currentRate"
              :rate="percentage"
              :speed="100"
              class="middle"
              size="140px"
              color="red"
            >
              <template #default>
                <div style="width: 140px;">
                  <div class="exercise">顺序刷题</div>
                  <div class="questionsAmount">
                    {{ exercises }}/{{ totalCount }}
                  </div>
                </div>
              </template>
            </van-circle>

            <div class="right">
              <div class="top">
                <i
                  class="iconfont iconicon_mine_tikushoucang subjectsIcon3"
                ></i>
                <div class="subjects">收藏题库</div>
              </div>
              <div class="bottom">
                <i class="iconfont iconicon_mine_mianjing subjectsIcon4"></i>
                <div class="subjects">已答题库</div>
              </div>
            </div>
          </div>
          <!-- 累计收录 -->
          <div class="addUp">
            <div style="font-size:25px;font-weight: 700;">累计收录</div>
            <div style="font-size:25px;margin-top:20px;">
              {{ totalCount }}
            </div>
          </div>
          <!-- 按钮 -->
          <div class="but">
            <van-button
              type="primary"
              size="large"
              color="#00b8d4"
              @click="$router.push(`/interview/${subjectId}`)"
              >模拟面试</van-button
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { interFilters } from '../../api/api' // 模拟面试筛选条件接口

export default {
  data () {
    return {
      active: 0, // 绑定当前激活标签对应的索引值
      pitchCity: '全国', // 下拉选中项对应选中的城市
      indexList: {}, // 城市列表数据
      subjectList: [], // 学科频道列表
      citySubject: [], // 新的学科频道列表
      currentRate: 0, // 环形组件临界值
      totalCount: 0, // 累计收录总数
      exercises: 0, // 刷题数
      subjectId: 0 // 学科id
    }
  },
  async created () {
    // 调用模拟面试筛选条件接口
    const res = await interFilters()
    // 保存累计收录总数数据
    this.totalCount = res.data.totalCount
    // 保存城市列表数据
    this.indexList = res.data.cityPositions['上海']
    // 保存学科频道列表
    this.subjectList = res.data.cityPositions
    // 保存新的学科频道列表
    this.citySubject = this.subjectList['上海']
    // 遍历保存学科id
    Object.keys(this.citySubject).forEach(key => {
      this.subjectId = this.citySubject[key].id
    })
    console.log(this.citySubject)

    // 调取加载题库目录数
    this.catalogueCount()
    // 调取加载刷题目录数
    this.catalogueCounts()
  },

  methods: {
    // 下拉选中城市按钮
    async citys (items) {
      // 将下拉选中的城市赋值
      this.pitchCity = items
      // 关闭下拉菜单
      this.$refs.item.toggle()
      // 将新的学科频道数据赋值citySubject然后在遍历渲染到页面
      this.citySubject = this.subjectList[items]
    },
    // 封装加载题库目录数的方法
    catalogueCount () {
      let i = 0
      const a = this.totalCount
      // 开启定时器
      var timer = setInterval(() => {
        this.totalCount = i++
        // 到达126后 停止
        if (i === a) {
          // 关闭定时器
          clearInterval(timer)
          this.totalCount = i
        }
      }, 10)
    },
    // 封装加载刷题目录数的方法
    catalogueCounts () {
      let i = 0
      // 开启定时器
      var timer = setInterval(() => {
        this.exercises = i++
        // 到达126后 停止
        if (i === 48) {
          // 关闭定时器
          clearInterval(timer)
          this.exercises = i
        }
      }, 10)
    }
  },
  computed: {
    // 计算环形进度条百分比
    percentage () {
      return (this.totalCount / 100) * this.exercises
    }
  }
}
</script>

<style lang="less" scoped>
.question {
  .top {
    .title {
      font-size: 20px;
    }
    .city {
      font-size: 12px;
      font-weight: 400;
      margin-left: 5px;
    }
    /deep/.van-tab {
      margin: 0 5px;
      font-size: 12px;
      border-radius: 20px;
      background-color: #ccc;
      color: #fff;
    }
    .channel {
      font-size: 14px;
      .contents {
        display: flex;
        align-items: center;
        padding-top: 30px;
        text-align: center;
        i {
          font-size: 20px;
          color: #fff;
        }
        .subjects {
          margin-top: 20px;
        }
        .top {
          margin-bottom: 20px;
          .subjectsIcon1 {
            padding: 15px;
            border-radius: 50%;
            background-color: red;
          }
          .subjectsIcon3 {
            padding: 15px;
            border-radius: 50%;
            background: linear-gradient(#ffda05, #ffb302);
          }
        }
        .bottom {
          .subjectsIcon2 {
            padding: 15px;
            border-radius: 50%;
            background: linear-gradient(#00ddec, #00b8d4);
          }
          .subjectsIcon4 {
            padding: 15px;
            border-radius: 50%;
            background: linear-gradient(#3ee5b1, #1dc779);
          }
        }

        .left,
        .right {
          flex: 1;
        }
        .middle {
          flex: 1;
          border-radius: 50%;
          background: linear-gradient(#ff6f92, #e40137);
          .exercise {
            margin-top: 40px;
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
          }
          .questionsAmount {
            color: #fff;
          }
        }
      }
      .addUp {
        text-align: center;
        margin: 60px 0;
      }
      .but {
        padding: 0 20px;
      }
    }
  }
}
</style>
